<template>
	<view class="smart-panel-h">
		<view class="container">
			<view class="card">
				<view class="title">泉州风光</view>
				<swiper circular indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
					<swiper-item style="background-color: beige;">
						<image class="swiper-img" src="/static/city1.png" style="width: 100%;" />
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/city2.jpg" style="width: 100%;" />
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/city3.jpg" style="width: 100%;" />
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/city4.jpg" style="width: 100%;" />
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/city5.jpg" style="width: 100%;" />
					</swiper-item>
				</swiper>
			</view>

			<view class="card">
				<view class="title">泉州介绍</view>
				<view class="mintitle">海上丝绸之路起点--泉州</view>
				<view class="text1">
					<text class="text-label">历史文化：</text>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。
				</view>
				<view class="text2">
					<text class="text-label">著名景点：</text>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。
				</view>
				<view class="text3">
					<text class="text-label">特色文化：</text>拥有<text class="highlight">南音</text>、<text
						class="highlight">木偶戏</text>和<text class="highlight">闽南建筑</text>等丰富的非物质文化遗产。
				</view>
			</view>

			<view class="card">
				<view class="title">探索进度</view>
				<view class="progress-text">当前进度: 60%</view>
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: '60%' }"></view>
				</view>
				<view class="progress-percent">60%</view>
			</view>

			<view class="card">
				<view class="title">选择城市</view>
				<view class="city-select">
					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
						:range="multiArray">
						<view class="uni-input">
							当前选择: {{ multiArray[0][multiIndex[0]] }} - {{ multiArray[1][multiIndex[1]] }} -
							{{ multiArray[2][multiIndex[2]] }}
						</view>
					</picker>
				</view>
			</view>

			<view class="card">
				<view class="title">泉州宣传</view>
				<view class="video-wrap">
					<video id="quanzhouVideo"
						src="/static/风光.mp4"
						@error="videoErrorCallback" controls poster="/static/封面.png"></video>
				</view>
			</view>

			<view class="card">
				<view class="title">泉州背景音乐</view>
				<view class="audio-btn">
					<button type="primary" @click="playAudio">播放</button>
					<view class="audio-desc">泉州南音 - 泉州传统乐团</view>
				</view>
			</view>

			<view class="card">
				<view class="title">偏好设置</view>

				<view class="preference-item">
					<view class="way-label">出行方式</view>
					<radio-group class="way-radio-group" @change="radioChange">
						<label class="radio-item">
							<radio value="bus" :checked="currentWay === 'bus'" />公交
							<radio value="self-driving" :checked="currentWay === 'self-driving'" />自驾
							<radio value="walk" :checked="currentWay === 'walk'" />步行
						</label>
					</radio-group>
				</view>

				<view class="divider"></view>
				<view class="preference-item">
					<view class="item-label">显示推荐景点:</view>
					<switch checked />
				</view>
				
				<view class="preference-item">
					<view class="item-label-group">
						<text class="item-label">探索半径:</text>
						<text class="radius-value">{{radius}}km</text>
					</view>
					<slider :value="radius" @change="sliderChange" :min="1" :max="100" class="slider" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audioContext: null,
				videoContext: null,
				currentWay: "bus",
				showRecommend: true,
				radius: 21,
				multiArray: [
					['福建省', '浙江省'],
					['泉州市', '福州市'],
					['丰泽区', '鲤城区']
				],
				multiIndex: [0, 0, 0]
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext('quanzhouVideo');
		},
		methods: {

			radioChange(e) {
				this.currentWay = e.target.value;
			},
			sliderChange(e) {
				this.radius = e.target.value;
			},

			bindMultiPickerColumnChange(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
				this.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0:
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['泉州市', '福州市'];
								this.multiArray[2] = ['丰泽区', '鲤城区'];
								break;
							case 1:
								this.multiArray[1] = ['杭州市', '宁波市'];
								this.multiArray[2] = ['西湖区', '鄞州区'];
								break;
						}
						this.multiIndex.splice(1, 1, 0);
						this.multiIndex.splice(2, 1, 0);
						break;
					case 1:
						switch (this.multiIndex[0]) {
							case 0:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['丰泽区', '鲤城区'];
										break;
									case 1:
										this.multiArray[2] = ['鼓楼区', '台江区'];
										break;
								}
								break;
							case 1:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['西湖区', '上城区'];
										break;
									case 1:
										this.multiArray[2] = ['鄞州区', '海曙区'];
										break;
								}
								break;
						}
						this.multiIndex.splice(2, 1, 0);
						break;
				}
				this.$forceUpdate();
			},
			videoErrorCallback(e) {
				console.log('视频播放错误', e);
			},
			playAudio() {
				if (!this.audioContext) {
					this.audioContext = uni.createInnerAudioContext();
					this.audioContext.src = '';
				}
				this.audioContext.play();
			},

			radioChange(e) {
				this.currentWay = e.detail.value;
			},

			switchChange(e) {
				this.showRecommend = e.detail.value;
			},

			sliderChange(e) {
				this.radius = e.detail.value;
			}
		}
	};
</script>
<style>

</style>